<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器登录页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">

    <script src="js/jquery.js"></script>
    <!-- 粒子样式 -->
    <script src="js/Particleground.js"></script>
    <script th:inline="javascript">

        $(document).ready(function () {
            //粒子背景特效
            $('body').particleground({
                dotColor:'#fff',
                lineColor: '#fff'
            });
        });
    </script>

    <script>
        $(function(){
            $("#submit").click(function(){
                // 点击登录按钮，获取用户名和密码
                var username = $("#username").val();
                var password = $("#password").val();

                // 判断用户名和密码是否为空(使用 trim 方法，防止输入空格)
                if(username.trim() == "" || password.trim() == ""){
                    alert("账号或密码不能为空");
                    return;
                }
                // 如果用户名和密码不为空，使用 Ajax 传入请求
                $.ajax({
                    type:"POST",
                    url:"/user/login",
                    data:{
                            "username":username,
                            "password":password
                    },
                    // 服务器返回的数据类型
                    dataType:"json",
                    // 请求成功，服务器返回数据
                    success:function(data){
                        console.log(data);
                        // 如果状态码为 200，表示登录成功
                        if(data.status == 200){
                            // alert("登录成功");
                            // 跳转到指定页面
                            window.location.href="list.html";
                        }else{
                            alert("登录失败，账号或密码错误");
                            // 登录失败，将用户名或密码置空
                            $("#username").val("");
                            $("#password").val("");
                        }
                    }
                });
            });
        });

        $(function () {
			  $("#register").click(function () {
				  window.location.href="register.html";
              });
          });

    </script>

</head>
<body>

    <div class="login-container">
        <form action="login" method="post">
            <div class="login-dialog">
                <strong>在线音乐登录</strong>
                <em>XiaoXiangYeYu's music login</em>
                <div class="row">
                    <span>账号</span>
                    <input type="text" id="username" name="username" placeholder="请输入账号" class="login_txtbx"/>
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password" name="password" placeholder="请输入密码" class="login_txtbx"/>
                </div>
                <div class="row">
                    <input type="button" id="submit" value="立即登录" class="submit_btn"/>
                </div>
                <div class="row">
                    <input type="button" id="register" value="注册账号" class="regis_btn"/>
                </div>
            </div>
        </form>
    </div>

</body>
</html>